<template>
    <input :type="type" @input="input" v-model="modelValue"></input>
</template>
<script setup lang="ts">
import { defineProps, watch, ref } from 'vue'
type Props = {
    value: string
    type: string
}
const props = defineProps<Props>()
const modelValues = props.type === 'number'? ref( Math.trunc(props.value)) : ref(props.value)
const modelValue = ref( modelValues.value)

watch(
    () => props.value,
    (newValue) => {
        modelValue.value = props.type === 'number'?Math.trunc(newValue) : newValue
    }
)
const emit = defineEmits(['update:value', 'change'])
const input = (event: Event) => {
    let value: string | number = (event.target as HTMLInputElement).value
    if (props.type === 'number') {
        value = Number(value)
         // value取整
         value = Math.trunc(value)
         

    }
    emit('update:value', value)
    emit('change', value)
}
</script>

<style scoped lang="scss">
input {
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;

    &:focus {
        border-color: rgba(43, 164, 235, 0.733);
        outline: none;
    }
}
</style>